<template>
	<view :style="{height: device.windowHeight + 'px'}">
		<view class="search" @click="onSearch"
			:style="{paddingTop:device.statusBarHeight+'px',height:device.navigationBarHeight+'px', 'border-bottom': '1px solid #F5F5F5'}">
			<u-search margin="30rpx 190rpx 0rpx 0rpx;" borderColor="#F5F5F5" bgColor="#fff;" placeholder="搜索商品名称"
				v-model="keyWord" :showAction="false"></u-search>
		</view>

		<view class="tab" :style="{'height': tabHeight+'px'}">
			<view :class="selTablIndex==0 ? 'sel-tab' : 'unsel-tab'" @click="onAll">综合</view>
			<view :class="selTablIndex==1 ? 'sel-tab' : 'unsel-tab'" @click="onSale">销量</view>
			<!-- <view :class="selTablIndex==2 ? 'sel-tab' : 'unsel-tab'" @click="onNew">新品</view> -->
			<view :class="selTablIndex==3 ? 'tab-price sel-tab' : 'tab-price unsel-tab'" @click="onPrice">
				<view class="text">价格</view>
				<view class="icon">
					<u-icon name="arrow-up" :color="isPriceUp ? '#2D2D2D' : '#DD0000'" size="8"></u-icon>
					<u-icon name="arrow-down" :color="isPriceUp ? '#DD0000' : '#2D2D2D'" size="8"></u-icon>
				</view>
			</view>
			<u-icon name="grid" color="xIconColor()" size="28" @click="onLayout"></u-icon>
			<view @click="onFilter">筛选</view>
		</view>
		<x-filter ref="filterRef" @confirm="emitFilterConfirm" @reset="emitFilterReset"></x-filter>

		<scroll-view scroll-y class="goods"
			:style="{ height: (device.screenHeight - device.tabBarHeight - device.navigationBarHeight - tabHeight) + 'px'}"
			refresher-default-style="black" :refresher-enabled="true" :refresher-triggered="isRefreshing"
			@refresherrefresh="onPullRefresh">
			<template v-if="!isLoading && sortList && sortList.length>0 && layout==1">
				<view :class="index%2==0 ? 'item-left' : 'item-right'" v-for="(item, index) in sortList" :key="index"
					@click="onGotoItemDetail(item)" :style="{
						'height': userInfo ? '580rpx' : '560rpx'
					}">
					<view class="item-content">
						<view class="img-container">
							<x-image :src="`${imageUrl}${item.picturePath}`"></x-image>
						</view>

						<view class="item_name">{{item.name}}</view>
						
						<view class="item_sale" >已售{{item.remark?item.remark:0}}件</view>
						<price :value="item.goodsPriceCurrent" />
						
					</view>
				</view>
				<view class="x-page-bottom-line"></view>
			</template>


			<template v-if="!isLoading && sortList && sortList.length>0 && layout==2">
				<view class="item-content-2" v-for="(item, index) in sortList" :key="index"
					@click="onGotoItemDetail(item)">
					<view class="img-container-2">
						<x-image :src="`${imageUrl}${item.picturePath}`"></x-image>
						<!-- <view class="sale-out-mask" v-if="item.quantity <= 0">已售罄</view> -->
					</view>

					<view class="item_info">
						<view class="item_name">{{item.name}}</view>
						<view class="item_sale">已售{{item.remark}}件</view>

						<price :value="item.goodsPrice" />
						<!-- <block v-else>
							<view class="presale-product-2">敬请期待</view>
						</block> -->

					</view>

				</view>
				<view class="x-page-bottom-line"></view>
			</template>

			<x-empty v-if="!isLoading && goodsList && sortList.length==0" class="x-empty"
				@refresh="onEmptyRefresh"></x-empty>
		</scroll-view>

	</view>
</template>

<script>
	import {
		page,
	} from '@/api/goods.js';
	import {
		ThemeMixin
	} from '@/mixins/theme/xThemeMixin.js'
	import {
		mapState
	} from 'vuex'
	import XImage from '@/components/image/xImage.vue'
	import deepClone from '../libs/function/deepClone';
	import XFilter from './components/xFilter.vue'
	
	export default {
		computed: {
			...mapState(['device', 'userInfo']),

		},
		components: {
			XImage, 
			XFilter,
		},
		mixins: [ThemeMixin],
		data() {
			return {
				tabHeight: 40, //以像素为单位
				keyWord: '',
				errImgUrl: require('@/static/errImg.png'),
				keyword: '',
				goodsList: [], //原始商品数据
				sortList: [],
				imageUrl: this.$Config.imageUrl,
				isLoading: true,
				isRefreshing: false,

				selTablIndex: 0, //默认综合
				sortData: [],

				layout: 1, //1: 一行两个布局，2:一行一个布局
				lowPrice: null, //最低价
				highPrice: null, //最高价

				showFilter: false,

				isPriceUp: true, //true 价钱由高到底显示，否则反之
			};
		},
		mounted() {
			console.log("classNav mounted")
			this.loadData();
		},
		methods: {
			onEmptyRefresh() {
				this.loadData();
			},
			onPullRefresh() {
				// 下拉刷新
				this.isRefreshing = true
				this.loadData();
			},
			onGotoItemDetail(item) {
				uni.navigateTo({
					url: '/pages/index/detail?id=' + item.id
				})
			},
			onSearch() {
				uni.navigateTo({
					url: 'search?keyWord=' + this.keyWord
				});
			},

			loadData(e) {
				
				this.isLoading = true
				page({
					pageNum:1,
					pageSize:1000,
					search:{}
				}).then(res => {
					
					this.goodsList = res.list;
					this.sortList = deepClone(this.goodsList)
					console.log("this.goodsList=", this.goodsList)
					this.isLoading = false
					this.isRefreshing = false
					
					this.lowPrice = null, //最低价
					this.highPrice = null, //最高价
					this.$refs.filterRef.reset()
					
					this._conditionSort()
				 }).catch(error => {
					this.isLoading = false
					this.isRefreshing = false
				});
			},

			emitFilterConfirm(price) {
				let lowPrice = null;
				let highPrice = null
				if (price) {
					lowPrice = price.lowPrice
					highPrice = price.highPrice
				}
				if (lowPrice != this.lowPrice || highPrice != this.highPrice) {
					this.lowPrice = lowPrice
					this.highPrice = highPrice
					console.log("this.lowPrice=", this.lowPrice, ",hightPrice=", this.highPrice)
					this._conditionSort()
				}
				// this.showFilter = false
				// this.$refs.filterRef.show(false)
			},
			emitFilterReset(price) {
				if (price && price.lowPrice != this.lowPrice || price.highPrice != this.highPrice) {
					this.lowPrice = null
					this.highPrice = null
					this._conditionSort()
				}
				// this.$refs.filterRef.show(false)
				// this.showFilter = false
			},
			_conditionSort() {
				switch (this.selTablIndex) {
					case 0: //综合
						this.onAll()
						break;
					case 1: //销量
						this.onSale()
						break;
					case 2: //新品
						this.onNew()
						break;
					case 3: //价格
						this.onPrice()
						break;
				}
			},
			onAll() {
				this.selTablIndex = 0
				this.sortList = this.goodsList.sort((item1, item2) => {
					// return item1._id.localeCompare(item2._id)
					// return item1._id - item2._id
					if (item1.goodsType == item2.goodsType) {
						return item1.id.localeCompare(item2.id)
					} else {
						//类型不一样， 预告商品排后面
						if (item1.goodsType == 1) {
							return 1
						} else {
							return -1
						}
					}
				}).filter((item, index) => {
					return this._filterByPrice(item)
				})
				// this.$forceUpdate()
				console.log("this.sortList=", this.sortList)
			},
			onSale() {
				this.selTablIndex = 1
				this.sortList = this.goodsList.sort((item1, item2) => {
					const a = item1.remark ? Number(item1.remark) : 0 ;
					const b = item2.remark? Number(item2.remark):0;
						return b-a;
				}).filter((item, index) => {
					return this._filterByPrice(item)
				})
				console.log("this.sortList=", this.sortList)
			},
			// 普通商品靠前显示， 预告商品靠后时间， 同类商品按时间降序显示
			onNew() {
				this.selTablIndex = 2
				this.sortList = this.goodsList.sort((item1, item2) => {
					if (item1.goodsType == item2.goodsType) {
						return Date.parse(item2.createTime) - Date.parse(item1.createTime);
					} else {
						//类型不一样， 预告商品排后面
						if (item1.goodsType == 1) {
							return 1
						} else {
							return -1
						}
					}
				}).filter((item, index) => {
					return this._filterByPrice(item)
				})
				console.log("this.sortList=", this.sortList)
			},
			_filterByPrice(item) {
				if (this.lowPrice != null && this.highPrice != null) {
					return item.goodsPrice >= this.lowPrice && item.goodsPrice <= this.highPrice
				} else if (this.lowPrice != null) {
					return item.goodsPrice >= this.lowPrice
				} else if (this.highPrice != null) {
					return item.goodsPrice <= this.highPrice
				} else {
					return true
				}
			},
			onPrice() {
				this.isPriceUp = !this.isPriceUp
				this.selTablIndex = 3
				this.sortList = this.goodsList.sort((item1, item2) => {
					if (item1.goodsType == item2.goodsType) {
						return this.isPriceUp ? item2.goodsPrice - item1.goodsPrice : item1.goodsPrice - item2
							.goodsPrice;
					} else {
						//类型不一样， 预告商品排后面
						if (item1.goodsType == 1) {
							return 1
						} else {
							return -1
						}
					}
				}).filter((item, index) => {
					return this._filterByPrice(item)
				})
				console.log("this.sortList=", this.sortList)
			},
			onLayout() {
				this.layout = this.layout == 1 ? 2 : 1
			},
			onFilter() {
				this.$refs.filterRef.showFilter(true)
			}
		}
	};
</script>


<style lang="scss" scoped>
	.tab {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		height: 80rpx;
		align-items: center;

		.sel-tab {
			color: red;
		}

		.unsel-tab {
			color: black;
		}

		.tab-price {
			display: flex;
			flex-direction: row;

			.text {
				flex: 1;
			}

			.icon {
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-top: 9rpx;
				margin-left: 4rpx;
			}
		}
	}
</style>


<!-- 一行一个显示 -->
<style lang="scss" scoped>
	.item-content-2 {
		display: flex;
		overflow: hidden;
		// position: relative;
		// height: 100%;
		height: 220rpx;
		margin: 0 16rpx 16rpx;
		background-color: white;

		.img-container-2 {
			width: 220rpx;
			height: 220rpx;
			position: relative;
			overflow: hidden;

			.x-image {
				display: flex;
				justify-content: center;
				align-item: center;
				width: 100%;
			}

			.sale-out-mask-2 {
				position: absolute;
				left: 50%;
				top: 50%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				background-color: rgba(255, 255, 255, 0.7);
				display: flex;
				width: 100%;
				height: 100%;
				justify-content: center;
				align-items: center;
				color: #999;
				font-weight: 500;
			}
		}

		.item_info {
			width: calc( 100% - 240rpx);
			margin-left: 20rpx;
			.item_name {
				font-size: 25rpx;
				color: #2D2D2D;
				line-height: 36rpx;
				height: 72rpx;
				margin: 10rpx 0rpx 0;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}


			.item_sale {
				height: 31rpx;
				font-size: 22rpx;
				color: #B0B0B0;
				line-height: 31rpx;
				margin:10rpx;
			}


			.price {
				display: flex;
				align-items: flex-end;
				color: #2d2d2d;

			}
			

			.presale-product-2 {
				flex: 1;
				margin: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: red;
			}

		}
	}
</style>

<!-- 一行两个布局 -->
<style lang="scss" scoped>
	@import '@/mixins/theme/xTheme.scss';

	.goods {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 750rpx;
		background-color: $x-content-background;

		.item-left {
			width: 335rpx;
			height: 580rpx;
			border-radius: 16rpx;
			margin: 20rpx 8rpx 0 32rpx;
			background-color: white;
			display: inline-block;
		}

		.item-right {
			width: 335rpx;
			height: 580rpx;
			border-radius: 16rpx;
			margin: 20rpx 32rpx 0 8rpx;
			background-color: white;
			display: inline-block;
		}

		.item-content {
			display: flex;
			flex-direction: column;
			overflow: hidden;
			position: relative;
			height: 100%;

			.img-container {
				width: 100%;
				height: 350rpx;
				position: relative;
				overflow: hidden;
				border-radius: 10rpx;

				.x-image {
					display: flex;
					justify-content: center;
					align-item: center;
					width: 100%;
				}

				.sale-out-mask {
					position: absolute;
					left: 50%;
					top: 50%;
					-webkit-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
					background-color: rgba(255, 255, 255, 0.7);
					display: flex;
					width: 100%;
					height: 100%;
					justify-content: center;
					align-items: center;
					color: #999;
					font-weight: 500;
				}
			}

			.item_name {
				font-size: 25rpx;
				color: #2D2D2D;
				line-height: 36rpx;
				height: 80rpx;
				margin: 10rpx 10rpx 0;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.item_sale {
				height: 31rpx;
				font-size: 22rpx;
				color: #B0B0B0;
				line-height: 31rpx;
				margin:10rpx;
			}

			.price {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				position: absolute;
				bottom: 60rpx;
				left: 50%;
				-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
				color: #2d2d2d;
			}
			.presale-product {
				flex: 1;
				margin: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: red;
			}

		}

	}
</style>

<style lang="scss" scoped>
	@import "@/mixins/theme/xTheme.scss";

	.search {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 20rpx;
		background-color: white;
	}

	.search_input {
		width: 600rpx;
		background-color: #fff;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		padding: 0 10rpx;
		margin-right: 10rpx;
		height: 60rpx;
	}

	.content {
		position: relative;
		top: 0px;
		left: 0px;
	}

	.type_list {
		width: 220rpx;
		background-color: #F9F9F9;
		overflow-y: scroll;
		position: absolute;
		height: 100%;
	}

	.type_item {
		width: 100%;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		position: relative;
		font-family: 'PingFang SC';
		font-size: 12px;
		font-weight: normal;
		color: #6A6A6A;
	}

	.current_type {
		background: #fff;
		font-size: 14px;
		font-weight: medium;
		color: #040404;
	}

	.current_type::before {
		display: block;
		position: absolute;
		content: '';
		background: $x-theme-color;
		width: 8rpx;
		height: 60rpx;
		top: 16rpx;
		left: 10rpx;
	}
</style>